import React, { useState } from 'react'
import '../scss/Information.scss'
import { Descriptions, Cascader, Checkbox, InputNumber, Input,Button } from 'antd';
import {
  RightOutlined
} from '@ant-design/icons';
import { Link } from "react-router-dom"
import CollectionProcessing from './CollectionProcessing'

export default function Information() {
  // const [num,setNum] = useState('个人信用')

  return (
    <div className='Information'>
      <div className='infor-title'>
        逾期信息
      </div>

      <Descriptions bordered size="small">
        <Descriptions.Item label="客户姓名："><Input disabled placeholder='刘某某' className='input'/></Descriptions.Item>
        <Descriptions.Item label="贷款类型:" span={2}><Cascader placeholder="个人信用" disabled /></Descriptions.Item>

        <Descriptions.Item label="借款编号">100001</Descriptions.Item>
        <Descriptions.Item label="合同号" span={2}>2018011510000152001</Descriptions.Item>

        <Descriptions.Item label="当前逾期期数："><InputNumber disabled placeholder='1/12' /> <a className='info'>查看还债信息<RightOutlined /></a></Descriptions.Item>
        <Descriptions.Item label="逾期本金:" span={2}><InputNumber disabled defaultValue={1585.00} /> 元</Descriptions.Item>

        <Descriptions.Item label="逾期利息："><InputNumber disabled defaultValue={166.00} /> 元</Descriptions.Item>
        <Descriptions.Item label="借款管理费:" span={2}><InputNumber disabled defaultValue={0.00} /> 元</Descriptions.Item>

        <Descriptions.Item label="本期还款日："><InputNumber disabled placeholder='2021-12-30'  className='InputNumber'/></Descriptions.Item>
        <Descriptions.Item label="逾期天数:" span={2}><InputNumber disabled defaultValue={5}/> </Descriptions.Item>

        <Descriptions.Item label="逾期风险等级：">正常类</Descriptions.Item>
        <Descriptions.Item label="催收次数:" span={2}> 1 </Descriptions.Item>
      </Descriptions>

      <CollectionProcessing />


    </div>
  )
}
